<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id)
			}
			window.onload=function(){
				var cnv=$$("canvas")
				var context=cnv.getContext("2d")
				
				context.fillStyle = 'rgb(241, 201, 96)';
				context.arc(100, 100, 50, 0, 2 * Math.PI, true);
				context.fill();
				context.lineWidth = 2;
				context.arc(100, 100, 40, 0, Math.PI, false);
				context.stroke();
// 左眼
				context.beginPath();
				context.arc(75, 90, 20, Math.PI * 1.1, Math.PI * 1.9, false);
				context.stroke();
				
				context.beginPath();
				context.arc(75, 90, 10, Math.PI * 1.1, Math.PI * 1.9, false); 
				context.stroke();
				
				context.beginPath();
				context.arc(60, 85, 5, Math.PI, Math.PI * 2, true); // 左眼左连接处
				context.stroke();
				
				context.beginPath();
				context.arc(90, 85, 5, Math.PI, Math.PI * 2, true); // 左眼 右连接处
				context.stroke();
				context.beginPath();
				
				
				context.arc(125, 90, 20, Math.PI * 1.1, Math.PI * 1.9, false);
				context.stroke();
				
				context.beginPath();
				context.arc(125, 90, 10, Math.PI * 1.1, Math.PI * 1.9, false);
				context.stroke();
				
				context.beginPath();
				context.arc(110, 85, 5, Math.PI, Math.PI * 2, true); // 右眼左连接处
				context.stroke();
				
				context.beginPath();
				context.arc(140, 85, 5, Math.PI, Math.PI * 2, true); // 右眼右连接处
				context.stroke();


				context.fillStyle = 'black';
				context.beginPath();
				context.arc(115, 80, 5, 0, Math.PI * 2, false);
				context.fill();
				
				// 左眼球
				context.fillStyle = 'black';
				context.beginPath();
				context.arc(65, 80, 5, 0, Math.PI * 2, false);
				context.fill();


			}
		</script>
	</head>
	<body>
	</body>
</html>
